<template>
  <ScaleScreen :width="1920" :height="1080" class="scale-wrap">
    <div class="header">
      <div class="title">平台名称</div>
      <div class="title-bottom">
        <div class="bottom-sidebar"></div>
      </div>
      <div class="button">
        <button class="btn" @click="screen">全屏</button>
      </div>
      <div class="date">
        <div class="left">
          <div class="time">{{ nowtime }}</div>
        </div>
        <div class="right">
          <div class="week">{{ nowWeek }}</div>
          <div class="datas">{{ nowdate }}</div>
        </div>
      </div>
      <div class="side">
        <dv-decoration-8
          style="width: 300px; height: 50px; margin-top: -30px"
        />
        <dv-decoration-8
          :reverse="true"
          style="width: 300px; height: 50px; margin-top: -30px"
        />
      </div>
      <div class="line">
        <dv-decoration-3
          style="
            width: 250px;
            height: 30px;
            margin-left: 230px;
            margin-top: -20px;
          "
        />
        <dv-decoration-3
          style="
            width: 250px;
            height: 30px;
            margin-right: 230px;
            margin-top: -20px;
          "
        />
      </div>
    </div>

    <div class="content">
      <div class="left">
        <div class="left-title">全国产地分布示意图</div>
        <dv-decoration-5 style="width: 40%; height: 40px; margin-top: 10px" />
        <div class="map">
          <echart @cityName="getCity" />
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="video">产地视频</div>
          <dv-decoration-5
            style="width: 40%; height: 40px; margin-top: -10px"
          />

          <dv-border-box-2 style="width: 93%; padding: 3%" :color="['#53ffc3']">
            <div class="top-content">
              <div class="left">
                <img src="../../assets/video.jpg" alt="" />
                <span class="text"> {{ cityName }} {{ nowtime }}</span>
              </div>
              <div class="right">
                <ul>
                  <li v-for="(v, i) in 20" :key="i"></li>
                </ul>
                <div class="right-bottom">
                  <el-select
                    v-model="value"
                    placeholder="请选择产地视频"
                    :popper-append-to-body="false"
                    style="width: 95%; margin-top: 5%"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </dv-border-box-2>
        </div>
        <div class="right-bottom">
          <div class="serach">产品查询</div>
          <dv-decoration-5
            style="width: 40%; height: 40px; margin-top: -10px"
          />
          <dv-border-box-2 style="width: 93%; padding: 3%" :color="['#53ffc3']">
            <div class="bottom-content">
              <div class="right">
                <search></search>
                <div class="filter">
                  <div class="texture" v-for="(item, index) in 8" :key="index">
                    <span>材质</span>
                    <div class="button-box">
                      <el-button v-for="(v, i) in 8" :key="i">
                        默认按钮
                      </el-button>
                    </div>
                  </div>
                </div>

                <!-- <div class="color" style="margin-top: 10px">
                    <span>颜色</span>
                    <div class="button-box">
                      <el-button v-for="(v, i) in 8" :key="i">
                        默认按钮
                      </el-button>
                    </div>
                  </div>
                  <div class="use" style="margin-top: 10px">
                    <span>用途</span>
                    <div class="button-box">
                      <el-button v-for="(v, i) in 8" :key="i">
                        默认按钮
                      </el-button>
                    </div>
                  </div>
                  <div class="origin" style="margin-top: 10px">
                    <span>产地</span>
                    <div class="button-box">
                      <el-button v-for="(v, i) in 8" :key="i">
                        默认按钮
                      </el-button>
                    </div>
                  </div> -->
              </div>
              <div class="left">
                <div class="goods">
                  <div class="img" v-for="(v, i) in 20" :key="i">
                    <img src="../../assets/cizuan.jpg" alt="" />
                    <div class="name">大理石</div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-2>
        </div>
      </div>
    </div>
  </ScaleScreen>
</template>

<script>
import screenfull from 'screenfull'
import echart from '../home/component/echart.vue'
import search from '../../components/search.vue'
import drawMixin from '../../utils/drawMixin'
import ScaleScreen from '../../components/scale-screen/scale-screen.vue'
export default {
  mixins: [drawMixin],
  name: 'App',
  components: {
    ScaleScreen,
    echart,
    search,
  },
  data () {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      fullscreen: false,
      nowdate: '', //日期
      nowtime: '', //时间
      newTimer: '', //定时器
      nowWeek: '', // 星期几
      cityName: '省份名称'
    }
  },
  created () {
  },
  methods: {
    getCity (name) {
      // console.log(name)
      this.cityName = name
      // console.log(this.cityName)
    },

    screen () {
      // 如果不允许进入全屏，发出不允许提示
      if (!screenfull.enabled) {
        // this.$message("您的浏览器不能全屏")
        return false
      }
      screenfull.toggle()
      // this.$message.success("全屏啦")
    },
    //获取时间
    timerOneScondRun () {
      let date = new Date()
      // 日期格式  2022年05月31日
      this.nowdate =
        date.getFullYear() +
        "年" +
        (date.getMonth() + 1 >= 10
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1)) +
        "月" +
        (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate()) + '日'
      // 时间格式 12:11:27
      this.nowtime =
        date.getHours() +
        ":" +
        (date.getMinutes() >= 10
          ? date.getMinutes()
          : "0" + date.getMinutes()) +
        ":" +
        (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds())

      this.nowWeek =
        "星期" + "日一二三四五六".charAt(new Date().getDay())
    },
  },
  mounted () {
    this.timerOneScondRun() //执行日期函数
    clearInterval(this.newTimer) //清除定时器
    // 定时获取时间
    this.newTimer = setInterval(this.timerOneScondRun, 1000)
  },
  beforeRouteLeave (to, from, next) {
    // 离开组件时停掉定时器，节省内存
    clearInterval(this.newTimer)
    next()
  },
  // getWeek () {
  //   var currentWeek = "星期" + "日一二三四五六".charAt(new Date().getDay())
  //   console.log(currentWeek)
  //   // currentWeek就是今天的星期
  //   this.week = currentWeek
  // },
  // getdate () {
  //   //获取当前日期函数
  //   let date = new Date(),
  //     year = date.getFullYear(), //获取完整的年份(4位)
  //     month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
  //     strDate = date.getDate() // 获取当前日(1-31)
  //   if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
  //   if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
  //   this.date = `${year}年${month}月${strDate}日`
  //   console.log(this.date)
  // },
  // var t = null
  // t = setTimeout(time, 1000);//開始运行


  // getTime () {
  //   var d = new Date()
  //   var hour = d.getHours()
  //   hour = hour > 9 ? hour : '0' + hour.toString()
  //   var minute = d.getMinutes()
  //   minute = minute > 9 ? minute : '0' + minute.toString()
  //   var second = d.getSeconds()
  //   this.time = `${hour}:${minute}:${second}`
  // }
}
</script>

<style lang="scss" scoped>
.scale-wrap {
  color: #51fdc1;
  width: 1920px;
  height: 1080px;
  overflow: hidden;

  .header {
    position: relative;
    .title {
      margin-top: 0.5%;
      font-size: 1.25rem;
      text-align: center;
      // font-weight: bold;
      position: relative;
    }
    .title-bottom {
      height: 30px;
      justify-content: center;
      display: flex;
      .bottom-sidebar {
        width: 100%;
        height: 100%;
        opacity: 1;
        background-image: url("../../assets/bottombar.gif");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        width: 50%;
      }
    }
    .button {
      position: absolute;
      right: 10%;
      top: 0;

      .btn {
        width: 60px;
        border-radius: 5px;
        height: 30px;
        background-color: #59ebe8;
        color: #fff;
        cursor: pointer;
      }
    }
    .date {
      display: flex;
      position: absolute;
      top: 0;
      left: 100px;
      .left {
        margin-right: 30px;
        .time {
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
    .side {
      display: flex;
      justify-content: space-between;
    }
    .line {
      display: flex;
      justify-content: space-between;
    }
  }

  .content {
    width: 100%;
    height: 100%;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    .left {
      width: 50%;
      // background-color: blue;
      // padding-top: 20px;
      // padding-left: 20px;
      .left-title {
        font-size: 20px;
        font-weight: bold;
        margin-left: 8.5%;
        // margin-bottom: -6px;
        margin-top: 3%;
        margin-bottom: -2%;
      }
    }
    .right {
      width: 50%;
      height: 100%;
      padding-top: 2%;

      .right-top {
        .video {
          height: 50%;
          margin-left: 14.5%;
          font-size: 20px;
          font-weight: bold;
          margin-right: 560px;
          // margin-top: 20px;
        }
        .top-content {
          margin-left: 2.6%;
          width: 95%;
          height: 220px;
          // background-color: green;
          display: flex;
          .left {
            width: 50%;
            height: 100%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .text {
              position: absolute;
              left: 0;
              bottom: 0;
              font-size: 20px;
              margin: 10px;
            }
          }
          .right {
            width: 50%;
            height: 100%;
            // background-color: blue;
            ul {
              margin-top: -9.7%;
              width: 100%;
              height: 200px;
              display: flex;
              flex-wrap: wrap;
              white-space: nowrap; //不换行
              overflow-y: scroll;
              // align-items: center;
              li {
                // display: inline-block;
                margin-left: 18px;
                margin-top: 31px;
                width: 120px;
                height: 70px;
                background-color: #fff;
              }
            }
            ul::-webkit-scrollbar {
              //去除滚动条
              width: 0;
              height: 0;
              display: none;
            }
            .right-bottom {
              margin-left: 10px;
              // margin-top: px;
              text-align: center;
              ::v-deep .el-select-dropdown {
                top: 30px !important;
              }
              ::v-deep .el-input--suffix {
                margin-top: -10px !important;
              }
              ::v-deep .el-select-dropdown__item {
                height: 50px !important;
                width: 115px !important;
                margin-top: 15px !important;
                margin-left: 1%;
              }
            }
          }
        }
      }
      .right-bottom {
        .serach {
          height: 50%;
          margin-left: 14.5%;
          margin-top: 5%;
          font-size: 20px;
          font-weight: bold;
        }
        .bottom-content {
          margin-left: 2.6%;
          // margin-top: -20px;
          width: 95%;
          height: 250px;
          color: #fff;
          // background-color: skyblue;
          font-size: 18px;
          display: flex;
          .right {
            width: 60%;
            .el-button::v-deep {
              width: 90px;
              text-align: center;
              // margin-left: 20px;
              padding: 10px;
              outline: none;
            }
            .filter {
              width: 800px;
              height: 220px;
              white-space: nowrap; //不换行
              overflow-y: scroll;
              margin-top: -10px;
              .texture {
                margin-top: 7px;
                display: flex;
                span {
                  // height: 220px;
                  overflow: hidden;
                  display: inline-block;
                  margin-top: 15px;
                }
                .button-box {
                  white-space: nowrap; //不换行
                  overflow-y: scroll;
                  width: 390px;
                  // background-color: red;
                  // overflow: hidden;
                  margin-left: 10px;
                  margin-top: 12px;
                }
              }
            }

            .filter::-webkit-scrollbar {
              //去除滚动条
              width: 0;
              height: 0;
              display: none;
            }

            .button-box {
              margin-top: 18px;
            }
            .button-box::-webkit-scrollbar {
              //去除滚动条
              width: 0;
              height: 0;
              display: none;
            }

            span {
              font-size: 14px;
            }
          }
          .left {
            width: 40%;
            margin-left: -2px;
            margin-top: -8px;
            .goods {
              width: 260px;
              flex-wrap: wrap;
              height: 265px;
              background-color: #fff;
              display: flex;
              white-space: nowrap; //不换行
              overflow-y: scroll;

              .img {
                margin-top: 3px;

                img {
                  width: 120px;
                  height: 70px;
                  margin-left: 5px;
                  margin-right: 5px;
                }
                .name {
                  margin-top: -3px;
                  font-size: 10px;
                  color: gray;
                  text-align: center;
                  transform: scale(0.9);
                }
              }
            }
            .goods::-webkit-scrollbar {
              //去除滚动条
              width: 0;
              height: 0;
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
